var CommonApprovalForm = function () {
  var ApprovalFormModel = function (approval) {
    BaseModel.call(this);

    var self = this;
    var fn = {
      initData: function (approval) {
        if (approval === null) {
          self.type = '';
          self.ids = [];
          return;
        }

        self.type = approval.type;
        var approverIds = approval.approverIds;
        var ids = approverIds.split(',');
        self.ids = ids;
        self.oldIds = _.cloneDeep(ids);
      }
    };

    this.checkValid = function () {
      if (this.type === '') {
        return 'type';
      }

      if (this.ids.length === 0) {
        return 'ids';
      }
      return '';
    };

    this.getObject = function (type) {
      var postData = {
        type: this.type
      };

      var ids = this.ids;
      if (type === 'add') {
        postData.idArray = JSON.stringify(ids)
      } else {
        var oldIds = this.oldIds;
        var addIds = _.difference(ids, oldIds);
        postData.addArray = JSON.stringify(addIds);
        var delIds = _.difference(oldIds, ids);
        postData.subArray = JSON.stringify(delIds);
      }

      return postData;
    };

    fn.initData(approval);
  };

  var template = /* html */ `
    <div class="common-approval-form" v-loading.fullscreen.lock="loading">
      <div class="form-item clearfix">
        <div class="form-item-label">审批类型:</div>
        <div class="form-item-content">
          <el-select v-model="approvalForm.type" size="small" style="width:200px"
            :disabled="type!=='add'">
            <el-option v-for="typeObj in typeList" :key="typeObj.value" :value="typeObj.value"
              :label="typeObj.label">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">可审批人:</div>
        <div class="form-item-content" style="padding-left:15px">
          <el-checkbox-group v-model="approvalForm.ids" size="small">
            <el-checkbox v-for="user in userList" :key="user.id" :label="user.id">{{user.name}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>

      <div style="text-align:center">
        <el-button size="small" type="primary" @click="ensure">
          <span v-if="type==='add'">新增</span>
          <span v-else>修改</span>
        </el-button>
      </div>
    </div>
  `;

  return {
    props: {
      approval: {
        type: Object,
        default: function () {
          return null;
        }
      },
      type: {
        type: String,
        default: 'add'
      },
      dropdownOption: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {
        loading: false,
        typeList: i18n.getDropDown('attendance.approvalSetting.type', [1, 2, 3]),
        approvalForm: new ApprovalFormModel(this.approval),
        userList: []
      };
    },

    created: function () {
      this.setUserList();
    },

    methods: {
      setUserList: function () {
        var dropdownOption = this.dropdownOption;
        var userList = dropdownOption.userList;
        if (userList !== undefined) {
          this.userList = userList;
          return;
        }

        this.loading = true;
        var self = this;
        ajaxRequest('user/queryAllUser').then(function (userList) {
          userList = _.map(userList, function (user) {
            return {
              id: user.id,
              name: user.userName
            };
          });
          self.userList = userList;
          dropdownOption.userList = userList;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      ensure: function () {
        var approvalForm = this.approvalForm;
        var code = approvalForm.checkValid();
        if (code !== '') {
          var msg = i18n.getMsg(`attendance.approvalSetting.error.${code}`);
          this.$alert(msg, '信息');
          return;
        }

        if (this.type === 'add') {
          this.addApproval();
        } else {
          this.updateApproval();
        }
      },

      addApproval: function () {
        var approvalForm = this.approvalForm;
        var postData = approvalForm.getObject(this.type);

        this.loading = true;
        var self = this;
        ajaxRequest('approval/addApprovalProcess', postData).then(function () {
          self.loading = false;
          self.$alert('成功新增审批流程', '信息', {
            callback: function () {
              self.$emit('save-success');
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      updateApproval: function () {
        var approvalForm = this.approvalForm;
        var postData = approvalForm.getObject(this.type);

        this.loading = true;
        var self = this;
        ajaxRequest('dingTalk/addAndDeleteApprovalProcess', postData).then(function () {
          self.loading = false;
          self.$alert('成功修改审批流程', '信息', {
            callback: function () {
              self.$emit('save-success');
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    template: template
  };
}();
